import React,{ Component } from 'react'
import { Row,Col } from 'antd'
import { Window,TitleBar,SegmentedControl, SegmentedControlItem } from 'react-desktop/macOs'
import UserInfo from './SettingForm/UserInfo'
import PasswordForm from './SettingForm/PasswordForm'

class SettingForm extends Component{
  constructor(props) {
    super(props);
    this.state = { selected: 1 }
  }

  renderItems() {
    return [
      this.renderItem(1, '用户信息', <UserInfo />),
      this.renderItem(2, '修改密码', <PasswordForm />),
    ];
  }

  renderItem(key, title, content) {
    return (
      <SegmentedControlItem
        key={key}
        title={title}
        selected={this.state.selected === key}
        onSelect={() => this.setState({ selected: key })}
      >
        {content}
      </SegmentedControlItem>
    );
  }

  render(){
    return (
      <div>
      <Row><Col span={8} offset={6}>
      <Window chrome width="640px" height="450px" padding="10px">
      <TitleBar title="设置" controls/>
      <SegmentedControl box>
      {this.renderItems()}
      </SegmentedControl>
      </Window>
      </Col></Row>
      </div>
    )
  }
}

export default SettingForm
